<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <input type="text" v-model.number="num" />
    <!-- 为什么不能直接写$store.state.count
    页面改制要修改给$store.state.count（虽然效果是对的）
    但是Vuex强烈要求我们在mutations里修改state状态（这样可以在调试工具中追踪变化过程） -->
    <div style="border: 1px solid black; width: 300px">
      <AddItem></AddItem>
    </div>
    <hr />
    <div style="border: 1px solid black; width: 300px">
      <SubItem></SubItem>
    </div>
  </div>
</template>

<script>
import AddItem from '@/components/AddItem'
import SubItem from '@/components/SubItem'
export default {
  components: {
    AddItem,
    SubItem
  },
  data () {
    // data 函数执行时，才给this身上添加data函数return对象里属性
    // 所以在里面this.a或者this.b都是访问不到值的，没挂载就要访问是underfined
    // 不要在data函数里写this

    return {
      // num: this.$store.state.count
    }
  },
  computed: {
    num: {
      // 修改库存
      set (val) {
        return this.$store.commit('setCount', val)
      },
      get () {
        return this.$store.state.count
      }
    }

  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 4px;
}
</style>